<template>
  <div class="root">
    <h2>当前求和为 {{ sum }}</h2>
    <button @click="add">sum + 1</button>
    <hr>
    <img v-for="(dog, index) in dogList" :src="dog" :key="index" :alt="'alt'" style="margin-right: 5px">
    <br>
    <button @click="getDog" style="margin-right: 10px">Get a dog</button>
  </div>
</template>

<script setup lang="ts">
import useSum from '@/hooks/useSum.ts'
import useDog from "@/hooks/useDog.ts";
const {sum, add} = useSum();
const {dogList, getDog} = useDog();
</script>

<style scoped>
  .root {
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
    padding: 20px; /* 内边距 */
    width: auto; /* 宽度 */
    font-family: Arial, sans-serif;
    color: #333333;
    margin: 10px; /* 上下边距和左右自动居中 */
    background-color: cornflowerblue;
    flex-direction: column;
  }

  img{
    height: 200px;
    width: auto;
  }
</style>